<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
	
	<h:head>
		<title>Administrador</title>
		<!-- Le styles -->
    	<link href="../assets/css/style5.css" rel="stylesheet"/>
		<script type="text/javascript"
		src="http://maps.google.com/maps/api/js?sensor=true" />
	</h:head>

	<h:body onload="$();">
		<div id="wrapper" align="center">
			<div id="MainConteiner">
				
				<div id="header_">
			    	<ui:insert name="header" >
			    	  <ui:include src="headerAdmin.xhtml" />
			    	</ui:insert>
    	    	</div>
				
				<div id="MainContentConteiner">
					
					Clique sob a localização desejada e adicione ao mapa
					
					
					<p:gmap id="gmap" center="-5.839398,-35.201826" zoom="15"
					type="HYBRID" style="width:600px;height:400px"
					model="#{mapMBean.simpleModel}"
					onPointClick="handlePointClick(event);" widgetVar="map" />

				<p:dialog widgetVar="dlg" showEffect="fade">
					<h:form prependId="false">
						<h:panelGrid columns="2">
							<h:outputLabel for="title" value="Nome do local:" />
							<p:inputText id="title" value="#{mapMBean.title}" />

							<f:facet name="footer">
								<p:commandButton value="Adicionar"
									actionListener="#{mapMBean.addMarker}"
									oncomplete="markerAddComplete()" />
								<p:commandButton value="Cancelar" onclick="return cancel()" />
							</f:facet>
						</h:panelGrid>

						<h:inputHidden id="lat" value="#{mapMBean.lat}" />
						<h:inputHidden id="lng" value="#{mapMBean.lng}" />
					</h:form>
				</p:dialog>
				
				
				<!-- tabela contendo as localizações -->
				
				<h:form id="formMessages">
					<p:growl id="messages" widgetVar="messages" showDetail="true"
						life="5000" sticky="false" autoUpdate="true" />
				</h:form>
				<h:form id="formPrincipal" >
					<p:dataTable value="#{mapMBean.todosLocais}" var="item"
						selection="#{mapMBean.localselecionado}" selectionMode="single"
						rowKey="#{item.id}" emptyMessage="Nenhuma localização encontrada!"
						style="margin-top: 5px;">

						<f:facet name="header">
                    Clique no item para selecion&aacute;-lo
                </f:facet>
						<p:column headerText="Local"
							style="text-align: center; width: 40px;">
							<h:outputText value="#{item.title}" />
						</p:column>
						
						
						<f:facet name="footer">
							<p:commandButton id="viewButton" value="Mostrar Localização"
								icon="ui-icon-search" update=":formPrincipal:display"
								oncomplete="newsDialog.show()" />
								
							
						</f:facet>
						<f:facet name="footer">
							<p:commandButton id="viewButton2" value="Deletar Localização"
								icon="ui-icon-search" update=":formPrincipal:display"
								oncomplete="delDialog.show()" />

						</f:facet>
					</p:dataTable>
					<p:dialog id="dialog" header="Local selecionado"
						widgetVar="newsDialog" resizable="false" width="400"
						showEffect="clip" hideEffect="fold">

						<h:panelGrid id="display" columns="2" cellpadding="4">

							<h:outputText value="Local:" />
							<h:outputText value="#{mapMBean.localselecionado.title}" />

							<h:outputText value="Latitude:" />
							<h:outputText value="#{mapMBean.localselecionado.lat}" />
							<h:outputText value="Longitude:" />
							<h:outputText value="#{mapMBean.localselecionado.lng}" />

						</h:panelGrid>
					</p:dialog>
					
					
					
					
					<p:dialog id="dialogdel" header="Tem certeza que deseja apagar?"
						widgetVar="delDialog" resizable="false" width="400"
						showEffect="clip" hideEffect="fold">

						<h:panelGrid id="display23" columns="2" cellpadding="4">

							<h:commandButton value="Deletar" action="#{mapMBean.delete}" />

						</h:panelGrid>
					</p:dialog>
				</h:form>

				<script type="text/javascript">
					var currentMarker = null;

					function handlePointClick(event) {
						if (currentMarker == null) {
							document.getElementById('lat').value = event.latLng
									.lat();
							document.getElementById('lng').value = event.latLng
									.lng();

							currentMarker = new google.maps.Marker({
								position : new google.maps.LatLng(event.latLng
										.lat(), event.latLng.lng())
							});

							map.addOverlay(currentMarker);

							dlg.show();
						}
					}

					function markerAddComplete() {
						var title = document.getElementById('title');
						currentMarker.setTitle(title.value);
						title.value = "";

						currentMarker = null;
						dlg.hide();
					}

					function cancel() {
						dlg.hide();
						currentMarker.setMap(null);
						currentMarker = null;

						return false;
					}
				</script>
				</div>
				
				<div id="footer">
			    	<ui:insert name="footer" >
			    	  <ui:include src="../footer.xhtml" />
			    	</ui:insert>
    	    	</div>
			</div>

		</div>

	</h:body>
</html>



					
					